<template>
  <div class="login">
    <div class="login-wrapper">
      <img class="img" src="@/assets/loginLeft.jpg" alt srcset />
      <a-form
        class="login-form"
        :model="loginForm"
        :rules="loginRules"
        auto-label-width
        @submit="handleSubmit"
      >
        <a-form-item>
          <span class="title">后台管理系统</span>
        </a-form-item>
        <a-form-item field="userName">
          <a-input v-model="loginForm.userName" placeholder="请输入用户名" allow-clear>
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item field="userPwd">
          <a-input v-model="loginForm.userPwd" placeholder="请输入密码" type="password" allow-clear>
            <template #prefix>
              <icon-lock />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item field="isRead">
          <a-checkbox v-model="loginForm.isRead">记住密码</a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button class="login-btn" type="primary" shape="round" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { login } from "@/api/user/index.js";
import Cookies from "js-cookie";
import { IconUser, IconLock } from "@arco-design/web-vue/es/icon";
export default {
  components: {
    IconUser,
    IconLock
  },
  setup() {
    const loginForm = reactive({
      userName: "superAdmin",
      userPwd: "123456",
      isRead: false
    });
    const loginRules = reactive({
      userName: { required: true, message: "name is required" },
      userPwd: { required: true, message: "password is required" }
    });
    const router = useRouter();
    const handleSubmit = async ({ values, errors }) => {
      if (errors) return;
      const { data } = await login(values);
      if (data.code == 200) {
        const { token, ...params } = data.data;
        Cookies.set("gn-userInfo", JSON.stringify(params));
        Cookies.set("gn-token", JSON.stringify(token));
        router.push("/");
      }
    };

    return {
      loginForm,
      loginRules,
      handleSubmit
    };
  }
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background: #394056;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-wrapper {
    width: 800px;
    height: 480px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    .img {
      flex: 1;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    .login-form {
      flex: 1;
      margin: auto 0;
      padding: 0 50px;
      .title {
        display: inline-block;
        width: 100%;
        text-align: center;
        font-size: 30px;
        color: #444;
        margin-bottom: 50px;
      }
    }
    .login-btn {
      width: 100%;
      background: #ed4014;
    }
  }
}
</style>
